<template>
  <div class="app">
    <transition :name="transitionName">
      <keep-alive v-if="isRouterAlive">
        <router-view v-if="$route.meta.keepAlive">
          <!-- 这里是会被缓存的视图组件，比如 Home！ -->
        </router-view>
      </keep-alive>
    </transition>

    <transition :name="transitionName">
      <router-view v-if="!$route.meta.keepAlive">
        <!-- 这里是不被缓存的视图组件，比如 Edit！ -->
      </router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
  provide() {
    return { reload: this.reload }
  },
  data() {
    return{
      isRouterAlive: true,
      transitionName: ''
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(() => (this.isRouterAlive = true));
    }
  },
  watch: {
    // 使用watch 监听$router的变化
    $route(to, from) {
      if (parseInt(to.query._t) < parseInt(from.query._t)) { // is back
        this.transitionName = 'slide-right';
      } else {
        this.transitionName = 'slide-left';
      }
    }
  }
}
</script>

<style>
#app,.app {
  position: absolute;
  background-color: #eee;
  height: 100%;
  width: 100%;
  font-size: .32rem;
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all .3s;
  position: absolute;
  width: 100%;
  left: 0;
}

.slide-left-enter, .slide-left-leave-active{
  opacity: 0;
  -webkit-transform: translate(50%, 0);
  transform: translate(50%, 0);
}

.slide-right-enter, .slide-right-leave-active {
  opacity: 0;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
</style>
